<template>
  <div>
    <mu-picker
      :slots="addressSlots"
      :visible-item-count="5"
      @change="addressChange"
      :values="address"
    />
    <div class="flex flex_between pd20">
      <mu-raised-button @click="confirmSelectTime()" primary label="确定" />
      <mu-raised-button secondary @click="closeDialog()" label="取消" />
    </div>
  </div>
</template>

<script>

export default {
  data() {
    let hours = [...Array(24)].map((v, i) => i < 10 ? '0'+i: ''+i)
    let minites = [...Array(60)].map((v, i) => i < 10 ? '0'+i: ''+i)
    return {
      addressSlots: [
        {
          width: "100%",
          textAlign: "right",
          values: hours
        },
        {
          width: "100%",
          textAlign: "left",
          values: minites
        }
      ],
      addressProvince: this.address[0],
      addressCity: this.address[1]
    };
  },
  props: {
    address: {
      type: Array,
      default: ["00", "01"]
    }
  },
  mounted() {
  },
  methods: {
    addressChange(value, index) {
      switch (index) {
        case 0:
          this.addressProvince = value;
          break;
        case 1:
          this.addressCity = value;
          break;
      }
      this.address = [this.addressProvince, this.addressCity];
    },
    confirmSelectTime() {
      this.$emit("confirmSelectTime", this.address);
    },
    closeDialog() {
      this.$emit("closeDialog");
    }
  }
};
</script>

<style lang="less">
// fixed Vue scroll warning
// [Intervention] Ignored attempt to cancel a touchmove event with cancelable
.mu-picker {
  touch-action: none;
}
</style>
